<script lang="ts" setup>
import { ref, watch } from "vue"
import { usePagination } from "@/hooks/usePagination"
import { type IGetOrderData } from "@/api/order/types/order"
import { ElTable } from "element-plus"
import { useUserStore } from "@/store/modules/user"
import { formatDateTime } from "@/utils"
import { getOrderDownDataApi, downOrderList } from "@/api/orderDown"

const userStore = useUserStore()

const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
const tableData = ref<IGetOrderData[]>([])
const loading = ref<boolean>(false)
const getTableData = () => {
  loading.value = true
  getOrderDownDataApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    excel_user: userStore.usernameID
  })
    .then((res: any) => {
      paginationData.total = res.data.total
      tableData.value = res.data.list
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}

//修改
// const handleUpdate = (row: any) => {
//   console.log("修改", row)
//   currentId.value = row.h5_id
//   formData.data = row
//   dialogVisible.value = true
// }

//下载
const handleDown = (row: any) => {
  downOrderList({ id: row.excel_id }).then((res: any) => {
    const blob = new Blob([res.data], {
      type: "application/xlsx;charset=utf-8"
    })
    const downloadElement = document.createElement("a")
    const href = window.URL.createObjectURL(blob)
    downloadElement.href = href
    downloadElement.download = `${row.excel_file_name}`
    document.body.appendChild(downloadElement)
    downloadElement.click()
    window.URL.revokeObjectURL(href)
  })
}

/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
/**E N D */
</script>

<template>
  <div class="app-container">
    <el-card>
      <div class="table-wrapper">
        <el-table :data="tableData">
          <!-- <el-table-column type="selection" width="50" align="center" /> -->
          <el-table-column prop="excel_id" label="ID" align="center" />
          <el-table-column prop="excel_create_time" label="时间" align="center">
            <template #default="scope">
              {{ formatDateTime(scope.row.excel_create_time) }}
            </template>
          </el-table-column>
          <el-table-column prop="excel_state" label="状态" align="center">
            <template #default="scope">
              <span v-if="scope.row.excel_state == 0">处理中</span>
              <span v-if="scope.row.excel_state == 1">成功</span>
              <span v-if="scope.row.excel_state == 2">失败</span>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="300" align="center">
            <template #default="scope">
              <el-button
                type="primary"
                text
                bg
                size="small"
                :disabled="scope.row.excel_state !== 1"
                @click="handleDown(scope.row)"
                >下载</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
:deep(.el-upload-list__item .el-icon--close-tip) {
  top: 20px;
  left: 10px;
  right: 0;
}
.doing {
  color: #b88230;
}
.error {
  color: red;
}
.success {
  color: #67c23a;
}
.again {
  color: #c45656;
}
:deep(.el-popper) {
  max-width: 50% !important;
}
.text-ellipsis {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
</style>
<style>
.el-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.el-popper.is-customized .el-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>
